<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 边框表格</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table table-bordered" style="width:700px; margin: 5px 20px">
    <caption style="text-align: center">
        <h2> All Game Type</h2></caption>
    <thead>
    <tr>
        <th>id</th>
        <th>name</th>
        <th>operate</th>
    </tr>
    </thead>
    @foreach($data as $d)
        <tbody>
        <tr>
            <th>{{$d->id}}</th>
            <th>{{$d->name}}</th>

            <th>
                <a href="javascript:;" data-id="{{$d->id}}" onclick="deleteRow(this)">删除</a>
                <a href="{{url('/edit').'/'.$d->id}}">修改</a>
            </th>
        </tr>
        </tbody>
    @endforeach
    <a href="{{'/index'}}" style="margin:20px 40px">首页</a>
    <a href="{{'/addtype'}}">添加</a>
</table>
<script>
    function deleteRow(that) {
        let id = that.getAttribute('data-id');
        $.ajax({
            url:"delete",
            dataType:"json",
            async:true,
            data:{"id":id},
            type:"GET",
            success:function (req) {
                console.log(req);
                if(req.msg==='ok'){
                    alert('删除成功！');
                    location.reload();
                }else{
                    alert('删除失败！');
                }
            },
            // error:function (xhr,state,code) {
            //
            //     console.log(xhr,state,code);
            // },
            // complete:function () {
            //     console.log('请求操作成功！');
            //
            // }
        });

    }
</script>
</body>
</html>
